<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Velkata-Home</title>
<link type="text/css" rel="stylesheet" href="/stylesheets/main-grey.css" />
<link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon" />
<script src="https://www.google.com/jsapi?key=ABQIAAAALaBYjHTT3MscB32QQ5om3hS3YBVzhUhNvM0yrSz-CK8h7wVqSBQsqNXabK-ORWN2cIAsZB9x3no9eQ" type="text/javascript"></script>
<script type="text/javascript">
	google.load("jquery", "1.6.4");
	google.load("jqueryui", "1.8.16");    

	function OnLoad(){		
		var cat = getParameter('cat');
		var cat_list = document.getElementById('cat');
		if (cat){
			for (i=0; i<cat_list.options.length; i++)
			{
				if (cat_list.options[i].text == cat.replace("+"," ")) {
					document.getElementById('cat').options.selectedIndex = i;
				}
			}
		}
	}

	function getParameter(paramName) {
	  var searchString = window.location.search.substring(1),
		  i, val, params = searchString.split("&");

	  for (i=0;i<params.length;i++) {
		val = params[i].split("=");
		if (val[0] == paramName) {
		  return unescape(val[1]);
		}
	  }
	  return null;
	}	
	
	function posts_list(ID){
		//var category = "SharePoint"
		//var selected = document.getElementById('cat').options.selectedIndex;
		//category = document.getElementById('cat').options[selected].text;
		//document.getElementById('cat_').value = document.getElementById('cat').options.selectedIndex;
		document.getElementById('posts_list').submit();	
	}	
  
	function hideReader(){
		if(document.getElementById('column_2').style.display != "none"){
			document.getElementById('column_1').style.width = "100%";
			document.getElementById('column_2').style.display = "none";
			document.getElementById('btnExtendMenu').value = "Collapse";
		}else{
			document.getElementById('column_2').style.display = "inline";
			document.getElementById('column_1').style.width = "25%";
			document.getElementById('column_2').style.width = "75%";
			document.getElementById('btnExtendMenu').value = "Extend";
		}
	}
	
	google.setOnLoadCallback(OnLoad);
</script>
</head>
<body>
{% include "header.html" %}
<noscript>JavaScript Disabled. Please enable JavaScript!</noscript>
<table id="main" class="content-place-holder" >
	<tr>
		<td id="column_1" class="left-place-holder" >
			<div class="menu-place-holder" >
				<a href="/" >Home</a><br/>
				<a href="/about" >About</a>
			</div>
			<form action="/" id="posts_list" method="get" >
				<div class="menu-place-holder" >
				<br/><span class="label-tag">Categories</span><br/><br/>
					<select id="cat" name="cat" class="menu-dropdown" onchange="posts_list();" >
						<option selected>All</option>
						{% for item in categories %}
							<option>{{item}}</option>
						{% endfor %}
					</select>
				</div>
				<div id="div_links" class="menu-place-holder" >
				<span class="label-tag">Article Titles</span>
				| <input type="button" id="btnExtendMenu" name="btnExtendMenu" class="menu-button" value="Extend" onclick="hideReader();" >
				<br/><br/>
					{{titles_list}}
				</div>
			</form>		
			<br/>
		{% if post_id %}	
		</td>
		<td id="column_2" class="right-place-holder" >
			<div id="div_title">
				<div class="label-tag-small"> 
				Article ID: {{ article_id }} | Category: {{ post_id.category }}</div><br/>
				<span class="label-tag">Title:</span> {{ post_id.title }}
			</div><br/>
			<span class="label-tag">Content:</span>
			<div id="div_reader" class="post-place-holder" >
				{{ post_id.content }}
			</div><br/>
			<div id="div_comments">
			<span class="label-tag">Comments:</span><br/><br/>
			{% for comment in comments_list %}
					<div class="label-tag-small">
						[{{comment.date.date}}] <strong>{{ comment.author.nickname }}</strong>:
					</div>
					<div class="post-place-holder" >{{ comment.comment|striptags|escape|urlize }}</div><br/>
			{% endfor %}
			</div>
			{% if user %}
				<form action="/new_comment" id="new_comment" method="post" >
					<span class="label-tag-small">Please note all HTML tags would be escaped, to post a link just type the full path of it. Example: http://www.google.com/</span>
					<textarea id="comment" name="comment" class="comment-box" ></textarea><br/>
					<input type="submit" value="Leve a comment"/>
					<input type="hidden" name="post_id" id="post_id" value="{{ article_id }}" />
					<input type="hidden" name="cat_" id="cat_" value="" />
				</form>	
			{% else %}
				<div id="sign_in">
					Post Feedback<br/>You have to [<a href="{{ login|fix_ampersands }}"><strong>sign in</strong></a>]
				</div>
			{% endif %}
		</td>
		{% else %}
		<td id="column_2" class="right-place-holder">
			<div id="home">
				<br/><br/>Welcome, <br/><br/><br/> This website is still under construction.<br/> You can find some new posts on the left menu panel.
			</div>
		</td>
		{% endif %}
	</tr>
</table>
{% include "footer.html" %}
</body>
</html>